import React, { useState } from 'react'
import { Button, notification, Typography } from 'antd'
import useGetTableData from '@/hooks/useGetTableData'
import SearchForm from '@/components/CustomForm/SearchForm'
import { useForm } from 'antd/es/form/Form'
import PageContainer from '@/components/PageContainer'
import { usePresetAttrColumns } from '../columns'
import CustomTable from '@/components/CustomTable'
import { IMPORT_FILE_ENUM } from '@/constant'
import { getProductPresetConfigPageList, importProductTemplateExcel, productSpuInfoeditImportExcel } from '@/api/goods'
import { ImportOutlined } from '@ant-design/icons'
import ImportFileModal from '@/components/ImportFileModal'
import { downloadByUrl, importNotification } from '@/utils/util'
import useGetClassIds from '@/hooks/useGetClassIds'
import PermissionButton from '@/components/PermissionButton'
const Index: React.FC = () => {
  const [form] = useForm()
  const [FormUpload] = useForm()
  const [isUploadFileShow, setisUploadFileShow] = useState<boolean>(false)
  const [tempCode, setTempcode] = useState<
    IMPORT_FILE_ENUM.GOODS_SIZE_IMPORT | IMPORT_FILE_ENUM.GOODS_INFO_TEMPLATE_IMPORT
  >(IMPORT_FILE_ENUM.GOODS_SIZE_IMPORT)
  const [exportLoading, setexportLoading] = useState(false)
  const { classIdOptions, settinyClassIds, tinyClassIds, handleClassIdChange } = useGetClassIds()
  const { tableProps, params, setParams, search, reset } = useGetTableData<{
    sizeGroupList: { sizeGroupCode: number; sizeGroupName: string }[]
  }>(getProductPresetConfigPageList, {
    form: form,
  })
  const onUploadFileCancel = () => {
    FormUpload.resetFields()
    setisUploadFileShow(false)
  }
  const onUploadFileOk = async () => {
    const { file } = await FormUpload.validateFields()
    setexportLoading(true)
    let res: any
    if (tempCode === IMPORT_FILE_ENUM.GOODS_SIZE_IMPORT) {
      res = await productSpuInfoeditImportExcel<{ linkUrl: string }>(file).finally(() => {
        setexportLoading(false)
        FormUpload.resetFields()
      })
      if (res.code === 200) {
        importNotification(res?.data?.linkUrl)
        search(params)
        onUploadFileCancel()
      }
    }
    if (tempCode === IMPORT_FILE_ENUM.GOODS_INFO_TEMPLATE_IMPORT) {
      res = await importProductTemplateExcel<{ linkUrl: string }>(file).finally(() => {
        setexportLoading(false)
        FormUpload.resetFields()
      })
      if (res.code === 200) {
        importNotification(res?.data?.linkUrl)
        search(params)
        onUploadFileCancel()
      }
    }
  }
  return (
    <PageContainer className="goods_presetattr_page">
      <SearchForm
        className="presetattrDom"
        params={params}
        form={form}
        extra={
          <div className="table_extra_flex">
            <PermissionButton
              permission="presetAttrImportConfig"
              type="primary"
              icon={<ImportOutlined />}
              onClick={() => {
                setTempcode(IMPORT_FILE_ENUM.GOODS_SIZE_IMPORT)
                setisUploadFileShow(true)
              }}
            >
              导入配置
            </PermissionButton>
            <PermissionButton
              permission="presetAttrImportTemplate"
              type="primary"
              icon={<ImportOutlined />}
              onClick={() => {
                setTempcode(IMPORT_FILE_ENUM.GOODS_INFO_TEMPLATE_IMPORT)
                setisUploadFileShow(true)
              }}
            >
              批量导入商品信息模板
            </PermissionButton>
          </div>
        }
        searchConfig={[
          {
            name: 'tinyClassIds',
            label: '商品分类',
            type: 'Cascader',
            option: classIdOptions,
            placeholder: '请选择商品分类',
            config: {
              changeOnSelect: true,
              onChange: handleClassIdChange,
              onClear: () => settinyClassIds([]),
              fieldNames: { label: 'className', value: 'classConfigId', children: 'childrenList' },
            },
          },
        ]}
        onFinish={(vals: any) => {
          search({
            ...vals,
            tinyClassIds: tinyClassIds.length > 0 ? tinyClassIds : null,
          })
        }}
        onReset={() => {
          settinyClassIds([])
          reset()
        }}
        initialValues={{ tinyClassIds: [] }}
      ></SearchForm>
      <CustomTable
        bordered
        columns={usePresetAttrColumns()}
        {...tableProps}
        rowKey={(rows) => rows.presetId}
        extraHeight={28}
        isScrollY
        filterDomClassName="presetattrDom"
      />
      <ImportFileModal
        loading={exportLoading}
        open={isUploadFileShow}
        onCancel={onUploadFileCancel}
        onOk={onUploadFileOk}
        form={FormUpload}
        tempCode={tempCode}
      ></ImportFileModal>
    </PageContainer>
  )
}

export default Index
